<!DOCTYPE html>
<html>
<head>
<title>Fig. 1.47 Recreation</title>
</head>
<body>
<canvas id="physicsCanvas" width="500" height="450"></canvas>
<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // --- Style settings ---
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineWidth = 2;
    ctx.font = '20px Times New Roman';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    
    // --- Helper function to draw an arrowed line ---
    function drawArrow(fromX, fromY, toX, toY) {
        const headLength = 10;
        const dx = toX - fromX;
        const dy = toY - fromY;
        const angle = Math.atan2(dy, dx);

        ctx.beginPath();
        ctx.moveTo(fromX, fromY);
        ctx.lineTo(toX, toY);
        ctx.lineTo(toX - headLength * Math.cos(angle - Math.PI / 6), toY - headLength * Math.sin(angle - Math.PI / 6));
        ctx.moveTo(toX, toY);
        ctx.lineTo(toX - headLength * Math.cos(angle + Math.PI / 6), toY - headLength * Math.sin(angle + Math.PI / 6));
        ctx.stroke();
    }

    // --- Top Diagram (Side View) ---
    const yTop = 60;
    const yBottom = 140; // D = 80px
    const xStart = 50;
    const xEnd = 450;

    // Pipe walls
    ctx.beginPath();
    ctx.moveTo(xStart, yTop);
    ctx.lineTo(xEnd, yTop);
    ctx.stroke();
    ctx.beginPath();
    ctx.moveTo(xStart, yBottom);
    ctx.lineTo(xEnd, yBottom);
    ctx.stroke();
    
    // Dimension D
    const dimX = 40;
    const tickLen = 10;
    ctx.beginPath();
    ctx.moveTo(dimX, yTop);
    ctx.lineTo(dimX, yBottom);
    ctx.moveTo(dimX, yTop);
    ctx.lineTo(dimX-tickLen, yTop);
    ctx.moveTo(dimX, yBottom);
    ctx.lineTo(dimX-tickLen, yBottom);
    ctx.stroke();
    ctx.fillText('D', dimX - 20, (yTop + yBottom) / 2);


    // Point charge Q
    const qX_top = 180;
    const qY_top = (yTop + yBottom) / 2;
    ctx.beginPath();
    ctx.arc(qX_top, qY_top, 4, 0, 2 * Math.PI);
    ctx.fill();
    ctx.fillText('Q', qX_top - 20, qY_top);

    // z-axis
    drawArrow(qX_top, qY_top, xEnd - 50, qY_top);
    ctx.fillText('z', xEnd - 40, qY_top);
    

    // --- Bottom Diagram (Cross-section) ---
    const centerX = 250;
    const centerY = 290;
    const innerSide = 120;
    const outerSide = 140; // Represents the thickness of the pipe wall

    // Outer square
    ctx.strokeRect(centerX - outerSide / 2, centerY - outerSide / 2, outerSide, outerSide);
    // Inner square
    ctx.strokeRect(centerX - innerSide / 2, centerY - innerSide / 2, innerSide, innerSide);

    // Coordinate axes
    // x-axis
    drawArrow(centerX, centerY, centerX + 120, centerY);
    ctx.fillText('x', centerX + 130, centerY + 3);
    // y-axis
    drawArrow(centerX, centerY, centerX, centerY - 100);
    ctx.fillText('y', centerX + 5, centerY - 110);

    // Point charge Q at origin
    ctx.beginPath();
    ctx.arc(centerX, centerY, 4, 0, 2 * Math.PI);
    ctx.fill();
    ctx.fillText('Q', centerX - 20, centerY + 20);


    // --- Figure Label ---
    ctx.fillText('Fig. 1.47', centerX, 420);

</script>
</body>
</html>